<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
	background-color: rgb(34, 45, 51);
}

ul, li {
	list-style: none;
	
}
#mydiv{
	padding-left:0px;
}
a {
	text-decoration: none;
	color:white;
}
.u1{
	padding-left:15px;
}
.u1 li{
	width: 160px;
	line-height: 30px;
}
.u1 li:hover {
	background-color:  rgb(50, 60, 70);
}

.u2 {
	width: 200px;
	display: none;
}

.u2 li {
	width: 120px;
	line-height: 30px;
}

.u2 li:hover {
	background-color: rgb(70, 80, 90);
}
 span {	
 			opacity:0.3;
 			right:20px;
            display: inline-block;     
            position: absolute;
        }
.current span {
            transform: rotate(90deg);
        } 
</style>
<script src="jquery.js">
</script>
<script>
$(function() {
    //1.监听一级菜单的点击事件
    $(".u1>li").click(function() {
        //1.1拿到二级菜单并显示
        var $sub = $(this).children(".u2");
        if(!$sub.is(":visible"))
        	$sub.slideDown(100);
        else if($sub.is(":visible"))
        	$sub.slideUp(100);
        //1.3让被点击的一级菜单的箭头旋转
         $(this).toggleClass("current");
    });
    $('.u2').click(function(e){
        e.stopPropagation(); // 停止冒泡
    });
    $('.u2').mouseenter(function(e){
    	e.stopPropagation();
    });
});
</script>
</head>
<body>
<div id = "mydiv">
<ul  class = "u1">
	<li class = "l1"  id = "l1" >
		<a href="#" >
			<i class="ai-image"></i>
			小区主页<span>&gt;</span>
		</a>
		<ul class = "u2">
			<li class = "l2">
				<a href = "../client/CommunityAnnouncement.jsp" target = "right">小区公告</a>
			</li>
		</ul>
	</li>
	<li class = "l1" id = "l2" >
		<a href="#" >
			<i class="ai-image"></i>
			物业信息<span>&gt;</span>
		</a>
		<ul class = "u2">
			<li class = "l2">
				<a href = "../client/PropertyInformation.jsp" target = "right">物业人员信息</a>
			</li>
			<li class = "l2">
				<a href = "../client/PropertyReview.jsp" target = "right">物业人员评价</a>
			</li>
		</ul>
	</li>
	<li class = "l1" id = "l3" >
		<a href="#">
			<i class="ai-file"></i>
			车辆管理<span>&gt;</span>
		</a>
		<ul class = "u2">
				<li class = "l2">
					<a href = "../client/UserCar.jsp" target = "right">车位管理</a>
				</li>
				<li class = "l2">
					<a href = "../client/userCarfee.jsp" target = "right" >车位费统计</a>
				</li>
		</ul>
	</li>
	<li class = "l1" id = "l4" >
		<a href="#">
			<i class="ai-game-controller"></i>
			小区服务<span>&gt;</span>
		</a>
		<ul class = "u2">
				<li class = "l2">
					<a href = "../client/repairApply.jsp" target = "right">报修申请</a>
				</li>
				<li class = "l2">
					<a href = "../client/complain.jsp"  target = "right">我要投诉</a>
				</li>
		</ul>
	</li>
	<li class = "l1" id = "l5" >
		<a href="#">
			<i class="ai-book"></i>
				生活缴费<span>&gt;</span>
		</a>
		<ul class = "u2">
				<li class = "l2">
					<a href = "../client/bill.jsp" target = "right">水电缴费</a>
				</li>
				<li class = "l2">
					<a href = "../client/UserFee.jsp" target = "right">物业缴费</a>
				</li>
				
		</ul>
	</li>
	<li class = "l1" id = "l6" > 
		<a href="#">
			<i class="ai-bell"></i>
			广告入驻<span>&gt;</span>
		</a>
		<ul class = "u2">
				<li class = "l2">
					<a href = "../client/adlist.jsp" target = "right">广告推送</a>
				</li>
				
		</ul>
	</li>
	<li class = "l1" id = "l7" >	
		<a href="#">
			<i class="ai-gear"></i>
			个人主页<span>&gt;</span>
		</a>
		<ul class = "u2">
				<li class = "l2">
					<a href = "../client/PersonalInformation.jsp" target = "right">个人信息</a>
				</li>
				<li class = "l2">
					<a href = "../client/MailBox.jsp" target = "right">个人信箱</a>
				</li>
		</ul>
				
	</li>
</ul>
</div>

</body>
</html>